<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="div1">

    </div>
    <p>-------------------------</p>
    <p id="p2"> p2节点 </p>
    <button onclick="addp2()">移动p2</button>
    <button onclick="noaddp2()">移除p2</button>
    <p>-------------------------</p>
    <div id="div2">

    </div>

    <script>
        const div1 = document.getElementById('div1')
        const div2 = document.getElementById('div2')


        //新增节点
        const p1 = document.createElement('p')
        p1.innerHTML = 'this is p1'
        div1.appendChild(p1)
    

        // 移动p2节点
        const p2 = document.getElementById('p2')
        function addp2 () {
            console.log(1)
            div1.appendChild(p2)
            console.log(child)
        }

        // 删除子元素来节点
        const child = div1.childNodes
        console.log(child)
        function noaddp2 () {
            console.log(0)
            div1.removeChild(child[2])
            console.log(child)
        }


        console.log( p1.parentNode )
    </script>
</body>
</html>